// 基于准备好的dom，初始化echarts实例
var myMap = echarts.init(document.getElementById('map'));
var myChart = echarts.init(document.getElementById('chart'));

option_chart = {
    title: {
        text: '历史人数'
    },
    tooltip: {},
    xAxis: {
        type: 'category',
        data: []
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '人数',
        type: 'line',
        smooth: true,
        data: []
    }]
}

option_map = {
    title: {
        text: '沈阳市市区异常聚集监控',
        // subtext: '',
        // sublink: '',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    bmap: {
        center: [123.4118195, 41.79265976],
        zoom: 10,
        roam: true,
        mapStyle: {}
    },
    series: [
        {
            name: '异常指数',
            type: 'scatter',
            coordinateSystem: 'bmap',
            data: [],
            symbolSize: function (val) {
                return val[2] / 10;
            },
            encode: {
                tooltip: 2 // 鼠标碰触点显示的是value[2]
            },
            itemStyle: {
                color: 'purple'
            },
        },
        {
            name: 'No.1',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            data: [],
            symbolSize: function (val) {
                return val[2] / 10;
            },
            encode: {
                tooltip: 2 // 鼠标碰触点显示的是value[2]
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                formatter: '{b}',
                position: 'right',
                show: true
            },
            itemStyle: {
                color: 'red',
                shadowBlur: 10,
                shadowColor: '#333'
            },
            zlevel: 1
        },
        {
            name: 'No.2~3',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            data: [],
            symbolSize: function (val) {
                return val[2] / 10;
            },
            encode: {
                tooltip: 2 // 鼠标碰触点显示的是value[2]
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                formatter: '{b}',
                position: 'right',
                show: true
            },
            itemStyle: {
                color: 'red',
                shadowBlur: 10,
                shadowColor: '#333'
            },
            zlevel: 1
        },
        {
            name: 'No.4~6',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            data: [],
            symbolSize: function (val) {
                return val[2] / 10;
            },
            encode: {
                tooltip: 2 // 鼠标碰触点显示的是value[2]
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                formatter: '{b}',
                position: 'right',
                show: true
            },
            itemStyle: {
                color: 'red',
                shadowBlur: 10,
                shadowColor: '#333'
            },
            zlevel: 1
        }
    ]
};

// 使用刚指定的配置项和数据显示图表。
myMap.setOption(option_map);

// // 添加百度地图插件
// var bmap;
// bmap = myMap.getModel().getComponent('bmap').getBMap();
// console.log(bmap);
// bmap.closeInfoWindow(); // 关闭点击地点出现详细信息
// bmap.disableDoubleClickZoom(); // 禁用双击放大

function drawMap() {
    let points = [];
    $.ajax({
        type: "GET",
        url: '/AbnormalPoints',
        success: function (res) {
            // 获取gc原始坐标
            for (let i = 0; i < res.length; i++) {
                points.push([res[i].longitude, res[i].latitude, res[i].rate, res[i].time]);
            }
            points.sort(function (a, b) {
                return b[2] - a[2];
            });

            // 进行坐标转换 / 默认聚集点数量不会超过100个
            let temp = [];
            for (coord of points) {
                temp.push([coord[0], coord[1]]);
            }
            temp = temp.join(';');
            $.ajax({
                type: "GET",
                url: "http://api.map.baidu.com/geoconv/v1/?coords=" + temp + "&from=3&to=5&ak=SipXZFGUXfBvDr88wUQHGdwhP06tY5Bz",
                dataType: "jsonp",
                success: function (res) {
                    for (index in res.result) {
                        points[index].push(points[index][0], points[index][1]);
                        points[index][0] = res.result[index].x;
                        points[index][1] = res.result[index].y;
                    }

                    // 绘制聚集点
                    myMap.setOption({
                        series: [{
                            data: points.slice(6, points.length),
                        }, {
                            data: points.slice(0, 1),
                        }, {
                            data: points.slice(1, 3),
                        }, {
                            data: points.slice(3, 6),
                        }]
                    });
                },
                cache: false
            });
        },
        cache: false
    });
}
drawMap();
setInterval(drawMap, 1000);

myChart.setOption(option_chart);

// 点击异常聚集点
myMap.on('click', function (params) {
    // 将原先chart中的数据清空
    option_chart.xAxis.data = [];
    option_chart.series[0].data = [];

    // 查询并显示异常聚集点的相关信息
    let info = [];
    info = params.data;
    let time = info[3];
    $('#date').html(time.substring(0, 4) + '/' + time.substring(4, 6) + '/' + time.substring(6, 8));
    $('#time').html(time.substring(8, 10) + ':' + time.substring(10, 12) + ':' + time.substring(12, 14));
    $.ajax({
        type: "GET",
        url: "http://api.map.baidu.com/reverse_geocoding/v3/?ak=SipXZFGUXfBvDr88wUQHGdwhP06tY5Bz&location=" + info[1] + "," + info[0] + "&output=json",
        dataType: "jsonp",
        success: function (res) {
            $('#adress').html(res.result.formatted_address);
            $('#streets').html(res.result.business);
            $('#position').html("经度：" + info[0] + "<br>" + "维度：" + info[1]);
        },
        cache: false
    });

    // 获取数据并刷新图表
    let chart_potint = [];
    $.ajax({
        type: "GET",
        url: '/History',
        data: {
            longitude: info[4],
            latitude: info[5]
        },
        success: function (res) {
            for (let i = 0; i < res.length; i++) {
                option_chart.xAxis.data.push(res[i].time);
                option_chart.series[0].data.push(res[i].count);
            }
            myChart.setOption(option_chart);
        },
        cache: false
    });
});